import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import api from '../../../src/api'
import './style.css'

class Search extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
            searchHot:[],
            aboutSinger:[],
            aboutSongSheet:[],
            searchContainer:[]
        }
    }

    delIptVal =() =>{
        let ipt=document.getElementById("ipt")
        ipt.value=""
        this.setState({
            aboutSinger:[],
            aboutSongSheet:[],
            searchContainer:[]
        })

    }
    // 初始化搜索页面热门推荐请求
    componentDidMount(){
        api.getSearchHot().then(res=>{
            console.log(res.data.result.hots);
            this.setState({
                searchHot:res.data.result.hots
            })
        })
    }
    // 监听输入框内容发起网络请求
    searchContent = (e) =>{


        let that = this
        console.log(e.target.value==='',e.target.value===null)
                
                if(e.target.value==='' || e.target.value===null || e.target.value===undefined){
                    console.log('00');
                    that.setState({
                        aboutSinger:[],
                        aboutSongSheet:[],
                        searchContainer:[]
                    })
                    return
                }else{
                    // 搜索内容列表请求
                    api.getPublic(`/search?keywords=${e.target.value}`)
                    .then(res => {
                        if(res.data.result.songs){
                            console.log(res.data.result.songs)
                            that.setState({
                                searchContainer:res.data.result.songs
                            })
                        }
                    }).catch(err=>{
                        that.setState({
                            searchContainer:[]
                        })
                    })
                    //   搜索页面关于歌手和关于歌单
                    api.getPublic(`/search/suggest?keywords=${e.target.value}`).then(res => {
                        console.log('关于歌手',res.data.result.artists,'关于专辑',res.data.result.playlists);
                    if(res.data.result.artists){
                    that.setState({
                        aboutSinger:res.data.result.artists,
                        // aboutSongSheet:res.data.result.playlists
                    })
                    }if(res.data.result.playlists){
                    that.setState({
                        aboutSongSheet:res.data.result.playlists
                    })
                    }else{
                    that.setState({
                        aboutSinger:[],
                        aboutSongSheet:[]
                    })
                }
                }).catch(res=>{
                that.setState({
                    aboutSinger:[],
                    aboutSongSheet:[]
                })
                })
            }
            // }
        
  
    }
    // 点击热门推荐
    clickSearchHot = (e) =>{
        console.log(e.target.innerHTML)
        let ipt=document.getElementById("ipt")
        ipt.value=e.target.innerHTML

            api.getPublic(`/search?keywords=${e.target.innerHTML}`)
            .then(res => {
                if(res.data.result.songs){
                    console.log('搜索内容列表',res.data.result.songs)
                    this.setState({
                        searchContainer:res.data.result.songs
                    })
                }
            }).catch(res=>{
                this.setState({
                    searchContainer:[]
                })
            })
        // /search/suggest?keywords
        api.getPublic(`/search/suggest?keywords=${e.target.innerHTML}`)
            .then(res => {
                console.log('关于歌手',res.data.result.artists,'关于专辑',res.data.result.playlists);
                if(res.data.result.artists){
                    this.setState({
                        aboutSinger:res.data.result.artists,
                        // aboutSongSheet:res.data.result.playlists
                    })
                }if(res.data.result.playlists){
                    this.setState({
                        aboutSongSheet:res.data.result.playlists
                    })
                }else{
                    this.setState({
                        aboutSinger:[],
                        aboutSongSheet:[]
                    })
                }
            }).catch(res=>{
                this.setState({
                    aboutSinger:[],
                    aboutSongSheet:[]
                })
            })

    }

    // 去歌手页面
    goSingerSheet = (id) =>{
        return() =>{
            console.log(id);
            this.props.history.push({pathname:'/singersheet',state:{id:id}})
        }
        
    }
    // 去歌单页面
    goSongSheet = (id) =>{
        return() =>{
            console.log(id);
            this.props.history.push({pathname:'/songsheet',state:{id:id}})
        }
        
    }

    // 节流

    



    render() {
        // console.log(this);
        return (
            <div className="search">
                <div className="search-nav">
                    <span onClick={()=>this.props.history.go(-1)} className="back iconfont icon-xitongfanhui"></span>
                    <input id="ipt" autoComplete="off" className="search-ipt" onChange={this.searchContent} type="text" placeholder="搜索歌曲，歌手，专辑" />
                    <span onClick={this.delIptVal} className="axxc iconfont icon-qingchu"></span>
                </div>
                <div className="box"></div>
                <div className={this.state.aboutSinger.length>0 || this.state.aboutSongSheet.length>0||this.state.searchContainer.length>0?"hide":"show"}>
                    <p className="search-hot-title">热门搜索</p>
                    <div>
                        {
                            this.state.searchHot.map((v,i)=>{
                            return <span onClick={this.clickSearchHot} className="search-hot-container" key={i}>{v.first}</span>
                            })
                        }
                    </div>
                </div>
                <div className={this.state.aboutSinger.length>0?"about":"hide"}>
                    <p>相关歌手</p>
                    {
                        this.state.aboutSinger.map((v,i)=>{
                            return <div onClick={this.goSingerSheet(v.id)} className="about-list" key={i}>

                           <img src={v.img1v1Url} alt="" />
 
                            <span>歌手：{v.name}</span>
                        </div>
                        })
                    }
                    
                </div>
                <div className={this.state.aboutSongSheet.length>0?"about":"hide"}>
                    <p>相关专辑</p>
                    {
                        this.state.aboutSongSheet.map((v,i)=>{
                            return <div onClick={this.goSongSheet(v.id)} className="about-list" key={i}>
                            <img src={v.coverImgUrl} alt="" />
                        <span>歌手：{v.name}</span>
                        </div>
                        })
                    }
                    
                </div>
                <div className={this.state.searchContainer!==[]?"search-container":"hide"}>
                    {
                        this.state.searchContainer.map((v,i)=>{
                            return (
                                <div className="search-container-list" key={i}>
                                    <p className="search-container-list-name">{v.name}</p>
                                    <p className="search-container-list-content">{v.artists[0].name}-{v.album.name}</p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Search);